<template>
  <div style="height: 50px;" class="headerContainer">
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="16" style="text-align: center;">
        <span class="sheetName">表名</span>
      </el-col>
      <el-col :span="4" style="text-align: right;">
        <el-button type="primary" class="save" size="default" icon="Check" @click="save">保存</el-button>
      </el-col>
    </el-row>
  </div>
  <div id="luckysheet" style="height: calc(100% - 50px);overflow-y: scroll;"></div>
</template>

<script>

import { onMounted, ref } from 'vue'

export default {
  name: 'test1',
  setup () {
    const list = ref([])
    const total = ref(40)
    const save = () => {
      console.log(window.luckysheet)
      console.log(window.luckysheet.getAllSheets())
    }
    const options = {
      container: 'luckysheet', // luckysheet为容器id
      lang: 'zh',
      title: '1111',
      showinfobar: false,
      showtoolbarConfig: {
        image: false,
        postil: false,
        pivotTable: false,
        screenshot: false,
        splitColumn: false,
        print: false,
        protection: false
      },
      showstatisticBarConfig: {
        count: false, // 计数栏
        view: false, // 打印视图
        zoom: false // 缩放
      },
      cellRightClickConfig: {
        chart: false,
        image: false,
        matrix: false,
        cellFormat: false,
        sort: false,
        filter: false,
        data: false
      },
      data: [
        {
          name: 'Sheet1',
          color: '',
          status: '1',
          order: '0',
          data: [],
          config: {},
          index: 0
        }, {
          name: 'Sheet2',
          color: '',
          status: '0',
          order: '1',
          data: [],
          config: {},
          index: 1
        }, {
          name: 'Sheet3',
          color: '',
          status: '0',
          order: '2',
          data: [],
          config: {},
          index: 2
        }]
    }
    onMounted(() => {
      window.luckysheet.create(options)
    })
    return {
      save,
      list,
      total
    }
  }
}
</script>

<style scoped lang="less">
.headerContainer {
  line-height: 50px;
  padding: 0 20px;

  .sheetName {
    color: red;
    font-size: 18px;
  }
}
</style>
